import  { useState, useEffect } from 'react'
import { NavBar, Space, Button, Tabs } from 'antd-mobile'
import {  MoreOutline,  HeartOutline } from 'antd-mobile-icons'
import { useLocation } from 'react-router-dom';
import { GuideO, CouponO, PlayCircleO, Contact } from "@react-vant/icons"
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

// 新增接口定义
interface DetailItem {
  _id: string;
  shareImg: string;
  content: string;
  img: string;
  name: string;
  zan: number;
}

export default () => {
    const navigate = useNavigate()
    const [list, setList] = useState<DetailItem[]>([])
    const getList = () => {
        axios.get("http://localhost:3000/wxy/gitping").then(res => {
            setList(res.data.data)
        })
    }
    useEffect(() => {
        getList()
    }, [])
    const { state: { item } } = useLocation() as { state: { item: any } };
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '0.16rem' }}>
                <MoreOutline />
            </Space>
        </div>
    )

    const back = () => {
        window.history.go(-1);
    }

    return (
        <div style={{ padding: "0rem 0.2rem 0.2rem 0.2rem" }}>
            <div>
                <NavBar right={right} onBack={back}>
                    @{item.name}
                </NavBar>
            </div>
            <div style={{ marginTop: "0.2rem", marginBottom: "0.05rem" }}>
                <div style={{ display: "flex", alignItems: "center" }}>
                    <div style={{ marginRight: "0.2rem" }}>
                        <img src={item.img} alt="" style={{ width: '0.6rem', borderRadius: '0.36rem' }} />
                    </div>
                    <div style={{ width: "1.5rem" }}>
                        <div style={{ display: "flex", justifyContent: "space-between" }}>
                            <p style={{ marginLeft: "0.1rem" }}>2</p>
                            <p style={{ marginLeft: "0.11rem" }}>496</p>
                            <p>578</p>
                        </div>
                        <div style={{ display: "flex", justifyContent: "space-between" }}>
                            <p>帖子</p>
                            <p>粉丝</p>
                            <p>喜欢</p>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <h2>@{item.name}</h2>
                <p>个性签名：{item.ge}</p>
                <Button style={{ width: "75%", marginRight: "3%", marginTop: "0.15rem", backgroundColor: "rgb(105,105,246)", color: "white" }}>关注</Button>
                <Button style={{ width: "20%", borderColor: "rgb(105,105,246)" }} onClick={() => {
                    navigate('/chat', { state: { item } })
                }}><GuideO style={{ fontSize: "0.2rem", color: "rgb(105,105,246)" }} /></Button>
            </div>
            <div style={{ marginTop: "0.2rem" }}>
                <Tabs style={{ '--active-line-color': 'rgb(105,105,246)', '--active-title-color': 'rgb(105,105,246)', '--content-padding': '0.1rem 0' }}>
                    <Tabs.Tab title={<CouponO />} key='fruits'>
                        <div style={{ display: "flex", flexWrap: "wrap" }}>
                            {
                                list.map((item) => {
                                    return (
                                        <div key={item._id} style={{ marginRight: "0.1rem", marginBottom: "0.1rem" }}>
                                            <div style={{ width: "1.3rem" }}>
                                                <img src={item.shareImg} alt="" style={{ width: "1.3rem" }} />
                                                <p>{item.content}</p>
                                                <div style={{ display: "flex", alignItems: "center", marginTop: "0.1rem" }}>
                                                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                                                        <img src={item.img} alt="" style={{ width: "0.25rem", borderRadius: "0.12rem" }} />
                                                        <p >{item.name}</p>
                                                    </div>
                                                    <div style={{ marginLeft: "0.1rem" }}>
                                                        <HeartOutline />{item.zan}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title={<PlayCircleO />} key='vegetables'>
                    </Tabs.Tab>
                    <Tabs.Tab title={<Contact />} key='animals'>
                    </Tabs.Tab>
                </Tabs>
            </div>
        </div>
    )
}





